<template>
    <!-- 递归树结构子组件 -->
  <div class="tree-select">
    <div class="sidebar-container">
      <ul class="sidebar-nav">
        <!-- 使用递归组件渲染树形结构 -->
        <tree-node
          v-for="(item, index) in treeData"
          :key="index"
          :node="item"
          :parent="null"
          @node-click="handleNodeClick"
          @update:active="handleActiveUpdate"
        >
          <template v-slot:node-prefix="{ node }">
            <slot name="nav-item-prefix" :node="node"></slot>
          </template>
          <template v-slot:child-node-prefix="{ node }">
            <slot name="submenu-item-prefix" :node="node"></slot>
          </template>
        </tree-node>
      </ul>
    </div>
    <!-- 右侧内容区域 -->
    <div class="content-container">
      <!-- 默认slot用于右侧内容 -->
      <slot></slot>
    </div>
  </div>
</template>

<script>

export default {
  name: "TreeSelect",
  components: {
  },
  props: {
    // 树形数据，支持从父组件传入
    treeData: {
      type: Array,
      default: () => [
      ],
    },
    // 导航栏宽度
    navWidth: {
      type: String,
      default: "180px",
    },
    // 是否支持多选
    multiple: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {};
  },
  methods: {
    handleNodeClick(node, parent) {
      // 重置所有激活状态（单选模式）
      if (!this.multiple) {
        this.resetActiveStates();
      }
      
      // 设置当前节点的激活状态
      node.active = !node.active;
      
      // 如果是多选模式且点击的是子节点，确保父节点也被选中
      if (this.multiple && parent) {
        if (node.active) {
          parent.active = true;
        } else {
          // 检查是否所有子节点都未选中
          const allChildrenInactive = parent.children.every(child => !child.active);
          if (allChildrenInactive) {
            parent.active = false;
          }
        }
      } else if (!this.multiple && parent) {
        // 单选模式下，选中父节点
        parent.active = true;
      }
      
      // 触发select事件
      this.$emit('select', node, parent);
    },
    
    handleActiveUpdate(activeNode) {
      // 处理激活状态更新
      this.$emit('update:active', activeNode);
    },

    resetActiveStates() {
      // 递归重置所有项的激活状态
      this._resetNodeStates(this.treeData);
    },
    
    _resetNodeStates(nodes) {
      if (!Array.isArray(nodes)) return;
      
      nodes.forEach(node => {
        node.active = false;
        if (node.children && node.children.length > 0) {
          this._resetNodeStates(node.children);
        }
      });
    },
    
    // 获取所有激活的节点
    getActiveItems() {
      const activeItems = [];
      this._collectActiveNodes(this.treeData, activeItems);
      return activeItems;
    },
    
    _collectActiveNodes(nodes, result) {
      if (!Array.isArray(nodes)) return;
      
      nodes.forEach(node => {
        if (node.active) {
          result.push(node);
        }
        if (node.children && node.children.length > 0) {
          this._collectActiveNodes(node.children, result);
        }
      });
    },
    
    // 展开所有节点
    expandAll() {
      this._toggleNodeExpand(this.treeData, true);
    },
    
    // 折叠所有节点
    collapseAll() {
      this._toggleNodeExpand(this.treeData, false);
    },
    
    _toggleNodeExpand(nodes, expand) {
      if (!Array.isArray(nodes)) return;
      
      nodes.forEach(node => {
        if (node.children && node.children.length > 0) {
          node.expanded = expand;
          this._toggleNodeExpand(node.children, expand);
        }
      });
    }
  },
  computed: {
    navItems() {
      return this.treeData;
    }
  },
  provide() {
    return {
      treeSelect: this
    };
  }
};
</script>

<style scoped>
.tree-select {
  display: flex;
  width: 100%;
  height: 100%;
}

.sidebar-container {
  width: v-bind(navWidth);
  /* background-color: #f5f7fa; */
  border-right: 1px solid #e4e7ed;
  max-height: 430px;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
}
/* 隐藏.sidebar-container区域的滚动条 */
.sidebar-container::-webkit-scrollbar {
  display: none;
}

.sidebar-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.content-container {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  box-sizing: border-box;
}

/* 滚动条样式优化 */
.sidebar-container::-webkit-scrollbar {
  width: 6px;
}

.sidebar-container::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.sidebar-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.sidebar-container::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>
